<template>
  <div>
    <!-- 盒子 -->
    <div class="border_parent_div" v-loading="loading">
    	<el-row :gutter="10">
    		<el-col :xs="24" :sm="12" :md="6" 
    		v-for="(app, index) in applications"
    		:key="index">
    			<div class="col-border">
    				<div class="border_img_parent_icon">
    					<div class="icon_border_div">
    						{{app.icon}}
    					</div>
    				</div>
    				<div class="border_title_app">{{app.title}}</div>
    				<div class="border_content_one_desc">{{app.desc}}</div>
    				<el-row style="margin-top: 40px; width: 100%; border-top: solid rgba(0,0,0,0.15) 1px;">
    					<el-col :span="12">
    						<div class="flex-item-l-cl"><i class="el-icon-position" style="margin-right: 10px;"></i>推荐
    						</div>
    					</el-col>
    					<el-col :span="12">
    						<div class="flex-item-r-cl yx-btn" @click="toRunApp(app.title,app.desc,app.instruct,app.examples)">
    							<i class="el-icon-video-play" style="margin-right: 10px;"></i>
    							运行
    						</div>
    					</el-col>
    				</el-row>
    			</div>
    		</el-col>
    		
    	</el-row>
    </div>
	
  </div>
</template>
<script>
	import axios from "axios";
	import Vue from 'vue';
	import {baseUrl} from '../utils/global.js'
    export default {
        name: 'MyApplication',
        data () {
			return {
				seen: true,
				tuIcon: '🤖',
				input: '',
				sliders: [],
				carousel_height: '550px',
				applications: [],
				loading: true,
			}
        },
		 methods: {
			menuSeen(){
		      // 屏幕尺寸
		      let screenHeight=document.body.clientWidth;
		      if(screenHeight>415){
		          this.seen=true;
		      }else{
		          this.seen=false;
		      }
			},
			/* 查询列表数据 */
			findAppList(){
				const config = {
					headers: {
						"Authorization": "bearer " + Vue.$cookies.get('token'),
					}
				};
				axios.get(baseUrl + "/chat_application/application/search/my?value=" + this.input, config)
				.then((res) => {
					if(res.status == 200){
						this.applications = res.data
						this.loading= false
					}
				})
				.catch((res) => {
				  this.$message.error(res.response.data.detail[0].msg);
				});
			},
			/* 去运行页面 */
			toRunApp(title,desc,instruct,examples){
				if(title == ""){
					this.$message.error("标题不能为空");
					return
				}
				if(desc == ""){
					this.$message.error("描述不能为空");
					return
				}
				if(instruct == ""){
					this.$message.error("指令不能为空");
					return
				}
				if(examples == ""){
					this.$message.error("示例不能为空");
					return
				}
				this.$router.push({
					path:"/RunApp",//这个path就是你在router/index.js里边配置的路径
					query:{
						  title: title,
						  desc: desc,
						  instruct: instruct,
						  examples: examples
					}
				})
			},
			
			
		},
		mounted() {
		    this.menuSeen()
			this.findAppList()
		},
    }
</script>

<style scoped >
   @import '../../static/css/MyApplication.css'
    
</style>